﻿@model Gueei.Gallery.Web.ViewModels.BatchUploadViewModel
@using Gueei.Gallery.Web.ViewModels
@{
    View.Title = "Batch";
    Layout = "~/Views/Shared/_Layout.cshtml";
	ViewContext.UnobtrusiveJavaScriptEnabled = true;
}
<h2>
    Batch Upload</h2>
<link href="@Url.Content("~/css/fileuploader.css")" type="text/css" rel="Stylesheet" />
<script src="@Url.Content("~/Scripts/fileuploader.js")" type="text/javascript"></script>
<script id="editFileTemplate" type="text/x-jquery-tmpl">
    <fieldset>
            <div class='preview'>
                <img src="./PreviewImage?imageId=${Id}" alt="preview"/>
            </div>
            <input type="hidden" name="Images[${Index}].Id" value="${Id}"/>
            <p>
                <label for="Images[${Index}].Name">Name</label>
                <input class="auto-imagename" name="Images[${Index}].Name" value="${Name}" type="text">
            </p>
            <p>
                <label for="Images[${Index}].Tags">Tags</label>
                <input class="autocomplete tags auto-imagetags" name="Images[${Index}].Tags" ref="/Search/Tags" value="" type="text">
            </p>
            <p>
                <label for="Images[${Index}].Description">Description</label>
                <textarea cols="20" rows="4" name="Images[${Index}].Description"></textarea>
            </p>
        </fieldset>
</script>

<script type="text/javascript">
	(function ($) {
		$.validator.addMethod(
		"required-dependent",
		function (value, element) {
			alert(value);
			return false;
		}, "error message");
		$.validator.unobtrusive.adapters.addBool("required-dependent");
	})(jQuery);
</script>

<div class="warning">
	<p>Upload is known to have problem with IE. Please use Firefox or others to Upload. </p>
</div>
<div class="edit-batch">
    <fieldset>
        <p>
            @Html.Label("defaultTag") @Html.TextBox("defaultTag", "", new { Id = "defaultTags", @class = "autocomplete tags", @ref = "/Search/Tags" })
            <input type="button" id="SetTagsDefaultButton" value="Set all" />
        </p>
    </fieldset>
</div>

@using (Html.BeginForm())
{
	<fieldset>
		<p>
			@Html.LabelFor(m => m.CreateNewAlbum) @Html.CheckBoxFor(m => m.CreateNewAlbum)</p>
		<p>
			@Html.LabelFor(m => m.NewAlbumName) @Html.TextBoxFor(m => m.NewAlbumName) @Html.ValidationMessageFor(m=>m.NewAlbumName)
		</p>
	</fieldset>
    <script type="text/javascript">
    	$(function () {
    		$("#defaultTags").multipleAutoComplete();
    		$("#SetTagsDefaultButton").click(function () {
    			$(".auto-imagetags").val($("#defaultTags").val());
    		});

    		$("#editFileTemplate").template("editTemplate");
    		(function () {
    			$.getJSON("_GetBatchFiles", function (data) {
    				$.each(data, function (index, item) {
    					item.Index = index;
    					var item = $.tmpl("editTemplate", item);
    					$(".tags", item).multipleAutoComplete();
    					$("#EditBatchFiles_Container").append(item);
    				});
    			});
    			//$("#EditBatchFiles_Container").load("_GetBatchFiles");
    		})();

    		var uploader_complete = function (id, filename, responseJSON) {
    			if (!responseJSON.success) return;
    			responseJSON.Index = $("#EditBatchFiles_Container fieldset").length;
    			$.tmpl("editTemplate", responseJSON).appendTo("#EditBatchFiles_Container");
    		};

    		var uploader = new qq.FileUploader({
    			element: $(".fileUploader")[0],
    			action: "_AsyncUpload",
    			allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
    			sizeLimit: 503316480,
    			onComplete: uploader_complete,
    			template: '<div class="qq-uploader">' +
				'<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
				'<div class="qq-upload-button">Choose files to upload</div>' +
				'<ul class="qq-upload-list"></ul>' +
				'</div>'
    		});

    		uploader._addToList = function (id, filename) {
    			//alert(id + " " + filename);
    			qq.FileUploader.prototype._addToList.apply(this, arguments);
    		}
    	});
    </script>

    <div class="fileUploader">
    </div>    
    <div id="EditBatchFiles_Container" style="border: 1px solid Black;" class="edit-images">
    </div>
    <input type="submit" />
}
